<!-- 使用 reactive 创建的是响应式对象，可以对对象内部的所有属性进行深层响应式转换，适用于对象及其嵌套对象。
使用 ref 创建的是响应式引用，适用于单个简单值的响应式转换，需要通过 .value 属性来访问或修改值。 -->

<template>
    <div>
      <button @click="increment">Count is: {{ count }}</button>
      <p>Message: {{ state.message }}</p>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue';
  
  const count = ref(0);
  
  // 使用 reactive 创建一个响应式对象
  const state = reactive({
    message: 'Hello from reactive!'
  });
  
  const increment = () => {
    count.value++;
  };
  </script>
  